<template>
  <van-dialog v-model="isShow" :title="$t('m.userCode')" :beforeClose="handleConfirm" show-cancel-button>
    <div class="content">
      <el-form label-position="right" label-width="60px" :model="formLabelAlign" ref="form">
        <el-form-item :label="$t('m.phoneCode')">
          <el-input v-model="formLabelAlign.phone" size="mini" :placeholder="`${$t('m.please')+$t('m.phoneCode')}`"></el-input>
        </el-form-item>
        <el-form-item class="code" style="margin-top: 10px">
          <el-row :gutter="20">
            <el-col :span="16"><el-input :placeholder="`${$t('m.please')+$t('m.code')}`" size="mini" v-model="mobileCode"/></el-col>
            <el-col :span="8" class="phoneCode">
              <el-button type="primary" size="mini"  @click.stop.prevent="getCaptcha" :disabled="disabled">{{text}}</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item class="code">
          <mu-row gutter>
            <mu-col
                span="3"
                offset="3"
            >
              <mu-flex justify-content="center">
                <mu-button
                    :ripple="false"
                    full-width
                    style="margin: 22px 50px 0 0"
                    @click="getCaptchaSystem"
                    flat
                >
                  <img
                      style="width: 130px"
                      :alt="$t('m.refresh')"
                      :src="codeSrc"
                  />
                </mu-button>
              </mu-flex>
            </mu-col>
            <mu-col span="3">
              <mu-text-field
                  full-width
                  v-model="code"
                  :label="$t('m.code')"
                  label-float
              ></mu-text-field>
            </mu-col>
          </mu-row>
        </el-form-item>
      </el-form>
    </div>
  </van-dialog>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default() {
        return false
      }
    },
    userObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    isShow:{
      get() {
        return this.show
      },
      set() {}
    }
  },
  data() {
    return {
      formLabelAlign: {
        phone: ''
      },
      phone: '',
      captchaCode: '',
      codeSrc: '',
      code: '',
      disabled: false,
      text: '获取验证码',
      mobileCode: '',
      user: {}
    }
  },
  // 方法
  methods: {
    handleConfirm(action,done) {
      if (action === 'confirm') {
        let loginParams = {}
        loginParams.username = this.userObj.username
        loginParams.token = this.userObj.token
        loginParams.mobile = this.formLabelAlign.phone
        loginParams.mobileCode = this.mobileCode
        loginParams.captchaCodeValue = this.code
        loginParams.captchaCode = this.captchaCode
        loginParams.dateTime = new Date().getTime()
        this.$api.login.remoteAuth(loginParams)
            .then(res => {
              if (res.status === 400 || res.status === 250) {
                this.$msg.fail(res.msg || res.message || '网络错误,清稍后再试')
              }
              else {
                window.sessionStorage.setItem('token',res.data.token)
                this.$emit('handleClose')
                done()
                this.$msg.success(res.message || '登陆成功')
                this.$router.push('/')
              }
            })
            .catch(err => {
              this.$msg.fail(err.msg || err.message || '网络错误,清稍后再试')
              this.getCaptcha()
            })
            .finally(() => {
              this.code = ''
            })
      }
      else {
        this.$emit('handleClose')
        done()
      }
    },
    // 获取验证码
    getCaptchaSystem() {
      this.$api.login.getCaptcha()
          .then(res => {
            this.captchaCode = res.headers.captchacode
            this.codeSrc = 'data:image/jpeg;base64,' + this.transformArrayBufferToBase64(res.data)
          })
          .catch(err => this.$msg.fail('获取验证码失败,请稍后再试',err))
    },
    // 解图片base64
    transformArrayBufferToBase64(buffer) {
      var binary = ''
      var bytes = new Uint8Array(buffer)
      for (var len = bytes.byteLength, i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i])
      }
      return window.btoa(binary)
    },
    // 获取手机验证码
    getCaptcha() {
      const obj = {}
      obj.username = this.userObj.username
      obj.token = this.userObj.token
      // obj.mobile = this.phone
      this.disabled = true
      var num = 60
      this.text = '5s'
      let timer = setInterval(() => {
        if (num-- > 0) {
          this.text = num + 's'
        } else {
          this.disabled = false
          this.text = '获取验证码'
          clearInterval(timer)
        }
      }, 1000)
      this.$api.login.mobileCheck(obj)
          .then(response =>{
                console.log(response)
              })
    }
  },
  // 生命周期函数
  created() {
    this.getCaptchaSystem()
    this.formLabelAlign.phone = this.userObj.mobile
    console.log(this.userObj)
  },
  mounted() {
  }
}
</script>

<style scoped>
.content {
  padding: 10px;
}
/deep/.code .el-form-item__content {
  margin-left: 0 !important;
  margin-bottom: 0 !important;
}
/deep/.el-form-item {
  margin-bottom: 0;
}
.phoneCode {
  padding-left: 0 !important;
}
</style>
